import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Button, Table, Modal, Popconfirm } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './List.less';
import AddCommunity from './AddCommunity';
import globalConstant from '../../utils/globalConstant';

const FormItem = Form.Item;


@connect(({ community, loading }) => ({
  community,
  loading: loading.models.community,
}))
@Form.create()
export default class ManagersManagement extends Component {
  state = {
    pageNum: globalConstant.paging.pageNum,
    pageSize: globalConstant.paging.pageSize,
    showCommunityAddVisible: false,
    form: {},
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'community/getCommunityList',
      payload: {
        pageNum: globalConstant.paging.defaultPageNum,
        pageSize: globalConstant.paging.defaultPageSize,
      },
    });
  }
  handleStandardTableChange = (pagination) => {
    const { dispatch } = this.props;
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      ...this.state.form,
    };
    this.setState({
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
    });
    dispatch({
      type: 'community/getCommunityList',
      payload: params,
    });
  }
  handleSearch = (e) => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'community/getCommunityList',
        payload: {
          keywordsValue: fieldsValue.keywordsValue,
        },
      });
      this.setState({
        form: {
          keywordsValue: fieldsValue.keywordsValue,
        },
      });
    });
  }
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      form:{},
    });
    dispatch({
      type: 'community/getCommunityList',
      payload: {
        pageNum: globalConstant.paging.defaultPageNum,
        pageSize: globalConstant.paging.defaultPageSize,
      },
    });
  }
  handleAddCommunityModal= () => {
    this.setState({
      showCommunityAddVisible: true,
    });
  }
  handleCommunityAddModalCancel =() => {
    this.setState({
      showCommunityAddVisible: false,
    });
  }
  handleChildAddCloseModal =() => {
    this.setState({
      showCommunityAddVisible: false,
    });
    this.props.dispatch({
      type: 'community/getCommunityList',
      payload: {
        pageNum: 1,
        pageSize: 10,
        ...this.state.form,
      },
    });
  }
  handleDeleteCommunity = (value) => {
    this.props.dispatch({
      type: 'community/deleteCommunity',
      payload: {
        id: value.id,
      },
      callback: () => {
        this.props.dispatch({
          type: 'community/getCommunityList',
          payload: {
            pageNum: 1,
            pageSize: 10,
            ...this.state.form,
          },
        });
      },
    });
  }
  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col md={8} sm={8}>
            <FormItem label="关键字">
              {getFieldDecorator('keywordsValue')(
                <Input placeholder="请输入搜索关键字" />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <span className={styles.submitButtons}>
              <Button icon="search" type="primary" htmlType="submit" >查询</Button>
              <Button icon="reload" style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  render() {
    const { community: { communityList }, loading } = this.props;
    console.log(communityList.items)
    const { showCommunityAddVisible } = this.state;
    const columns = [
      {
        title: '名称',
        dataIndex: 'communityName',
      
      },
      {
        title: '省',
        dataIndex: 'provinceName',
       
      },
      {
        title: '市',
        dataIndex: 'cityName',
       
      },
      {
        title: '区',
        dataIndex: 'countyName',

      },

      {
        title: '操作',
        key: 'key',
        render: (text, record, index) => {
          return (
            <Popconfirm title="是否删除？" onConfirm={() => { this.handleDeleteCommunity(text); }}>
              <Button type="danger" >删除</Button>
            </Popconfirm>

          );
        },
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: communityList && communityList.totals,
      showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
      ...globalConstant.pagingFormat,
    };
    return (
      <PageHeaderLayout title="小区管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderSimpleForm()}
            </div>
            <Card bordered>
              <div className={styles.tableListOperator}>
                <Button icon="plus" type="primary" onClick={() => this.handleAddCommunityModal()}>
                  新建
                </Button>
              </div>
              <Table
                bordered
                loading={loading}
                dataSource={communityList.items}
                columns={columns}
                rowKey={record => record.id}
                pagination={paginationProps}
                onChange={this.handleStandardTableChange}
              />
            </Card>
          </div>
        </Card>
        <Modal
          visible={showCommunityAddVisible}
          title="添加小区"
          footer={null}
          width="40%"
          onCancel={() => this.handleCommunityAddModalCancel()}
          destroyOnClose
        >
          <AddCommunity closeModal={this.handleChildAddCloseModal.bind(this)} />
        </Modal>
      </PageHeaderLayout>
    );
  }
}
